<template>
  <div class="my_inf">
    <div class="inf_left">
      <div class="inf_photo">
        <img src="../../assets/img/logo.png" alt="" />
        <span>{{ myInf.s_name }}</span>
      </div>
      <ul class="clear">
        <li>
          年级：<span>{{ myInf.s_grade }}</span>
        </li>
        <li>
          学号：<span>{{ myInf.s_shoolId }}</span>
        </li>
        <li>
          专业：<span>{{ myInf.s_major }}</span>
        </li>
        <li>
          班级：<span>{{ myInf.s_classname }}</span>
        </li>
        <li>
          电话：<span>{{ myInf.s_phone }}</span>
        </li>
        <li>
          邮箱：<span>{{ myInf.s_eMail }}</span>
        </li>
      </ul>
      <div class="inf_btn">
        <el-button
          size="small"
          type="primary"
          @click="openChangeInformation()"
          round
          >修改信息</el-button
        >
        <el-button
          size="small"
          type="success"
          @click="openChangePassword()"
          round
          >修改密码</el-button
        >
        <el-popconfirm title="确定要退出账号吗？" @confirm="end()">
          <el-button type="danger" size="small " slot="reference" round
            >退出登录</el-button
          >
        </el-popconfirm>
      </div>
    </div>
    <div class="inf_right">
      <div>
        <h3>获得奖项</h3>
        <ul class="awards_list" v-if="awards.length >0">
          <li v-for="infor in awards" :key="infor.a_id">
            <h4>{{ infor.a_title }}</h4>
            <span>{{ infor.a_time }}</span>
          </li>
        </ul>
        <div v-if="awards.length == 0">暂无获得奖项</div>
      </div>
      <div>
        <h3>所属团队</h3>
        <div class="team_card" v-if="JSON.stringify(team) !== '{}'">
          <h3>团队成员</h3>
          <div>
            <span>队长： </span>
            <div @click="lookStusentInf(team.cap_id)" class="click">
              <img src="../../assets/img/logo.png" alt="" />
              <span>{{ team.cap }}</span>
            </div>
            <span>队员：</span>
            <div
              v-for="(member, i) in team.t_member"
              :key="i"
              @click="lookStudentInf(member.s_id)"
              class="click"
            >
              <img src="../../assets/img/logo.png" alt="" />
              <span>{{ member.s_name }}</span>
            </div>
          </div>
        </div>
        <div class="team_card" v-if="JSON.stringify(team) === '{}'">暂未加入队伍</div>
      </div>
      <div>
        <h3>我的项目</h3>
        <el-collapse v-if="project.length > 0">
          <el-collapse-item
            v-for="(data, i) in project"
            :key="data.id"
            :title="data.p_title"
            :name="i"
          >
            <div>
              {{ data.p_synopsis }}
            </div>
            <el-button
            v-if="data.p_type == 2"
              class="downBtn"
              size="small"
              type="primary"
              round
              ><a :href="`http://localhost:3000/upload/downOverReport?p_id=${data.id}`">下载结业报告书</a></el-button
            >
            <el-button
            v-if="data.p_type == 1"
              class="downBtn"
              size="small"
              type="success"
              round
              ><a  class="downBtna" >进行中...</a></el-button
            >
          </el-collapse-item>
        </el-collapse>
        <div v-if="project.length == 0">暂无项目</div>
      </div>
    </div>
    <el-dialog title="以下是可修改信息" :visible.sync="changeInformation">
      <el-form v-model="form">
        <el-form-item label="电话">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.eMail" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeChangeInformation">取 消</el-button>
        <el-button type="primary" @click="submitChangeInformation"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="changePassword">
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="oldPass">
          <el-input
            type="text"
            v-model="ruleForm2.oldPass"
            autocomplete="off"
            placeholder="输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm2.pass"
            auto-complete="off"
            placeholder="输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm2.checkPass"
            auto-complete="off"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeChangePassword">取 消</el-button>
        <el-button type="primary" @click="submitChangePassword('ruleForm2')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    //  <!--旧密码是否为空-->
    let checkSmscode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    // <!--验证密码-->
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error("密码为6-12位字符"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    // <!--二次验证密码-->
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      myInf: {},
      awards: [],
      project: [],
      team: [],
      changeInformation: false,
      changePassword: false,
      form: {
        tel: "",
        eMail: "",
      },
      ruleForm2: {
        pass: "",
        checkPass: "",
        oldPass: "",
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "change" }],
        checkPass: [{ validator: validatePass2, trigger: "change" }],
        oldPass: [{ validator: checkSmscode, trigger: "change" }],
      },
    };
  },
  name: "MyInf",
  mounted() {
    this.getStudentData();
  },
  methods: {
    download(){
      axios.get('http://localhost:3000/upload/download')
    },
    getStudentData() {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post(`http://localhost:3000/student/studentMes`, {
          s_id,
        })
        .then((ret) => {
          this.project = ret.data.studentMes.project;
          this.myInf = ret.data.studentMes.mes;
          this.awards = ret.data.studentMes.awards;
          this.team = ret.data.studentMes.team;
        });
    },
    submitChangeInformation() {
      if (
        this.form.tel == this.myInf.s_phone &&
        this.form.eMail == this.myInf.s_eMail
      ) {
        this.$message({
          showClose: true,
          message: "信息无任何修改！",
          type: "warning",
        });
        this.closeChangeInformation();
      } else {
        var token = localStorage.getItem("token");
        var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
        axios
          .post(`http://localhost:3000/student/changeInf`, {
            s_id,
            s_phone: this.form.tel,
            s_eMail: this.form.eMail,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "修改成功！！",
                type: "success",
              });
              this.myInf.s_phone = this.form.tel;
              this.myInf.s_eMail = this.form.eMail;
              this.closeChangeInformation();
            }
          });
      }
    },
    submitChangePassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var token = localStorage.getItem("token");
          var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
          axios
            .post(`http://localhost:3000/changePassword`, {
              u_type: 1,
              user_id: s_id,
              new_password: this.ruleForm2.checkPass,
              old_password: this.ruleForm2.oldPass,
            })
            .then((ret) => {
              if (ret.data.code == 1) {
                this.$message({
                  showClose: true,
                  message: "修改成功！！",
                  type: "success",
                });
                this.closeChangePassword();
              } else {
                this.$message({
                  showClose: true,
                  message: "旧密码不匹配！！",
                  type: "warning",
                });
              }
            });
        } else {
          this.$message({
            showClose: true,
            message: "填写有误请检查后再提交！",
            type: "error",
          });
          return false;
        }
      });
    },
    openChangeInformation() {
      (this.form.tel = this.myInf.s_phone),
        (this.form.eMail = this.myInf.s_eMail);
      this.changeInformation = true;
    },
    closeChangeInformation() {
      this.form = {
        tel: "",
        eMail: "",
      };
      this.changeInformation = false;
    },
    openChangePassword() {
      this.changePassword = true;
    },
    closeChangePassword() {
      this.ruleForm2 = {
        pass: "",
        checkPass: "",
        oldPass: "",
      };
      this.changePassword = false;
    },
    end() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    lookStudentInf(id) {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      if (id == s_id) return;
      this.$router.push({ path: "/StudentInf", query: { student_id: id } });
    },
  },
};
</script>

<style scoped>
.my_inf {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
}
.inf_left {
  width: 300px;
  height: 700px;
  position: sticky;
  top: 10px;
  padding: 0px 10px;
}
.inf_left,
.inf_right > div {
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.inf_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  font-size: 18px;
  font-weight: 700;
  color: #303133;
}
.inf_photo > img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ddd;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.inf_left > ul {
  border-top: 2px solid #606266;
  margin-bottom: 200px;
}
.inf_left > ul > li {
  font-size: 16px;
  color: #606266;
  margin: 20px 10px;
}
.inf_btn {
  display: flex;
  justify-content: space-between;
  margin: 20px 10px;
}
.inf_right {
  width: 70%;
}
.inf_right > div {
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px 20px;
}
.inf_right > div > h3 {
  width: 100px;
  height: 40px;
  font: 18px/40px "";
  font-weight: 700;
  color: #303133;
  text-align: center;
  border-bottom: 2px solid #606266;
}
.awards_list {
  display: flex;
  flex-wrap: wrap;
}
.awards_list li {
  width: 35%;
  margin: 20px;
  padding: 10px;
  color: white;
  background-color: #409eff;
  border-radius: 20px;
}
.team_card {
  border-radius: 10px;
  padding: 20px 10px;
}
.team_card img {
  background-color: #fff;
}
.team_card > h4 {
  height: 24px;
  font-weight: 700;
  font: 18px/24px "";
  margin-bottom: 20px;
}
.team_card > div {
  margin-top: 5px;
  height: 60px;
  display: flex;
  align-items: center;
}
.team_card > div > span {
  font-size: 18px;
  display: inline-block;
}
.team_card > div > div {
  display: inline-block;
  margin: 0 20px;
}
img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
.downBtn{
  float: right;
  margin: 10px;
  padding: 0;
}
.downBtn a{
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  color: white;
  text-align: center;
}
</style>
